<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">
#content { width:960px; margin:5px auto;}
#left { background: #FFF; height: auto; width: 690px; float: left; }
#right { background: #FFF; height: auto; width: 260px; float: right; }


.select {
	width: 150px;
}

</style>
<script type="text/javascript" src="../../js/jquery.min.js"></script>

<script type="text/javascript" src="../../js/highcharts.js"></script>

<script type="text/javascript" src="../../js/modules/exporting.js"></script>

<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: '铺货'
					},
					xAxis: {
						categories: [
							'Product A', 
							'Product B', 
							'Product C', 
							'Product D', 
							'Product E',
							'Product F',
							'Product G',
							'Product H',
							'Product I'
							
						],
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: '产品铺货率(%)'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 '产品铺货率: '+ Highcharts.numberFormat(this.y, 1) +
								 '%';
						}
					},
				        series: [{
						name: 'Population',
						data: [50,70,89,100,80,56,89,68,66],
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				
			});
				
		</script>
</head>

<body>

<div align="center">

<div  style="width:960px; height:100px; background-image:url(../../images/title.png)">
</div>

<div align="left" style="width:960px">
<p><a href="../../home.html">首页</a>&nbsp;&gt;&gt;&nbsp;铺货</p>
</div>

<div id="content">
  <div id="left" align="center" >
  <div id="container" style="width: 680px; height: 400px; margin: 0 auto"></div>
  
  </div>
  <div id="right" align="center">
<table width="260" border="0" cellspacing="5">
  <tr>
    <td width="80" align="right">Month&nbsp;&nbsp;
</td>
    <td width="176">
    <select name="Month" class="select">
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
</select>
    </td>
  </tr>
  <tr>
    <td align="right">System&nbsp;&nbsp;</td>
    <td><select name="System" class="select">
      <option value="沃尔玛">沃尔玛</option>
      <option value="家乐福">家乐福</option>
      <option value="好又多">好又多</option>
    </select></td>
  </tr>
  <tr>
    <td align="right">Region&nbsp;&nbsp;</td>
    <td><select name="Region" class="select">
      <option value="All">All</option>
      <option value="East">East</option>
      <option value="West">West</option>
      <option value="South">South</option>
      <option value="North">North</option>
    </select></td>
  </tr>
  <tr>
    <td align="right">Area&nbsp;&nbsp;</td>
    <td><select name="Area" class="select">
      <option value="All">All</option>
      <option value="Shanghai">Shanghai</option>
      <option value="Beijing">Beijing</option>
      <option value="Anhui">Anhui</option>
    </select></td>
  </tr>
  <tr>
    <td align="right">City&nbsp;&nbsp;</td>
    <td><select name="City" class="select">
      <option value="All">All</option>
      <option value="Shanghai">Shanghai</option>
      <option value="Beijing">Beijing</option>
      <option value="Wuhu">Wuhu</option>
    </select></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
    <map name="mymap"><area shape="rect" coords="95,3,153,22" href="pack_ytd.html" />
    <area shape="rect" coords="2,1,65,21" href="pack.html" />
    </map>
    <img src="../../images/BT_mtd_ytd.PNG" width="156" height="24" border="0"  usemap="#mymap" /></td>
    </tr>
</table>


  </div>
  
 </div>
 

</div>

</body>
</html>
